<template>
  <div class="page">
    <header>菜谱分类</header>
    <div>
      <!-- 一级分类 -->
      <left-list class="left-list" @change="handleChangeAction"></left-list>
      <!-- 二级、三级分类 -->
      <right-list class="right-list"></right-list>
    </div>
  </div>
</template>

<script>
import LeftList from "./com/left-list.vue";
import RightList from "./com/right-list.vue";
export default {
  components: {
    LeftList,
    RightList,
  },
  methods: {
    handleChangeAction(type) {
      // 菜单切换了，需要切换分类数据
    },
  },
};
</script>

<style scoped lang="scss">
header {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: 700;
}
.page {
  display: flex;
  flex-direction: column;
  div {
    display: flex;
    height: calc(100% - 50px);
  }
}
</style>
